<template>
	<view class="duiHuanQuan">
		<div class="box1 flex-start">
			<div class="left colum">
				<div class="f22 ctheme mb35 mt15"><span class="f46 fbold">1</span>张</div>
				<div class="f24 ctheme">电影票</div>
			</div>
			<div class="line-y"></div>
			<div class="right bfff posr">
				<div class="f30 mb20 fbold text1">电影票兑换券</div>
				<div class="f24 mb20">指定影院可用</div>
				<div class="f24">2024-05-1 23:59到期</div>
				<div class="posa center btn-gouse cfff f22">去使用</div>
			</div>
		</div>
		<!-- 代金券 -->
		<div class="box1 flex-start">
			<div class="left colum">
				<div class="f22 ctheme mb35 mt15"><span class="f46 fbold">50</span>元</div>
				<div class="f24 ctheme">代金券</div>
			</div>
			<div class="line-y"></div>
			<div class="right bfff posr">
				<div class="f30 mb20 fbold text1">代金券</div>
				<div class="f24 mb20">指定影院可用</div>
				<div class="f24">2024-05-1 23:59到期</div>
				<div class="posa center btn-gouse cfff f22">去使用</div>
			</div>
		</div>
		<!-- 已失效 -->
		<div class="box1 flex-start">
			<div class="left colum other1">
				<div class="f22 mb35 mt15"><span class="f46 fbold">1</span>张</div>
				<div class="f24 ">电影票</div>
			</div>
			<div class="line-y"></div>
			<div class="right bfff posr">
				<div class="f30 mb20 fbold text1">电影票兑换券</div>
				<div class="f24 mb20">兑换券,指定影院可用</div>
				<div class="f24">2024-05-1 23:59到期</div>
				<image src="../../../static/duiback.png" mode="aspectFill" class="open-icon posa"></image>
			</div>
		</div>
	</view>
</template>

<script>
</script>

<style lang="scss" scoped>
	
	.open-icon{
		width: 160rpx;
		height: 140rpx;
		top: 10rpx;
		right: 0;
	}
	.box1{
		margin: 0 auto 35rpx;
		.left{
			background: #FFE2E2;
			border-radius: 13rpx;
			width: 175rpx;
			height: 210rpx;
		}
		.line-y{
			height: 184rpx;
			border-right: 1rpx dashed #FE8A8A;
		}
		.right{
			width: 528rpx;
			height: 210rpx;
			padding: 35rpx 20rpx 30rpx;
			border-radius: 13rpx;
			.text1{
				margin-bottom: 45rpx;
			}
			.btn-gouse{
				background: linear-gradient(to left, #FF8901, #FF5325);
				top: 85rpx;
				right: 20rpx;
				height: 40rpx;
				width: 103rpx;
				border-radius: 28rpx;
			}
		}
		.other1{
			background: #e8e8e8;
		}
	}
	
</style>